webpack 与 vite 的区别是什么？

1. 开发环境区别

   vite 自己实现 server，不对代码打包，充分利用浏览器对 <script type=module> 的支持

   i. 假设 main.js 引入了 vue
   
   ii. 该 server 会把 import { createApp } from 'vue' 改为 import { createApp } from "/node_modules/.vite/vue.js" 这样浏览器就知道去哪里找 vue.js 了

   b. webpack-dev-server 常使用 babel-loader 基于内存打包，比 vite 慢很多很多很多

   i. 该 server 会把 vue.js 的代码（递归地）打包进 main.js

2. 生产环境区别

   a. vite 使用 rollup + esbuild 来打包 JS 代码

   b. webpack 使用 babel 来打包 JS 代码，比 esbuild 慢很多很多很多

   i. webpack 能使用 esbuild 吗？可以，你要自己配置（很麻烦）。

3. 文件处理时机

   a. vite 只会在你请求某个文件的时候处理该文件

   b. webpack 会提前打包好 main.js，等你请求的时候直接输出打包好的 JS 给你

目前已知 vite 的缺点有：

• 热更新常常失败，原因不清楚
• 有些功能 rollup 不支持，需要自己写 rollup 插件
• 不支持非现代浏览器